<template>
  <up-popup v-model:show="show" mode="bottom" :round="20" :closeable="true" @close="handleClose">
    <view class="location-modal">
      <view class="modal-header">
        <text class="title">巡检员实时位置</text>
      </view>
      
      <view class="inspector-info">
        <view class="info-item">
          <text class="label">姓名：</text>
          <text class="value">{{ inspectorInfo?.name }}</text>
        </view>
        <view class="info-item">
          <text class="label">工号：</text>
          <text class="value">{{ inspectorInfo?.employeeId }}</text>
        </view>
        <view class="info-item">
          <text class="label">管理停车场：</text>
          <text class="value">{{ inspectorInfo?.parkingLot }}</text>
        </view>
      </view>
      
      <view class="map-container">
        <map 
          :latitude="mapCenter.latitude" 
          :longitude="mapCenter.longitude"
          :scale="16"
          :markers="markers"
          :show-location="true"
          class="map"
        ></map>
      </view>
      
      <view class="location-info">
        <view class="info-item">
          <text class="label">经度：</text>
          <text class="value">{{ inspectorInfo?.longitude }}</text>
        </view>
        <view class="info-item">
          <text class="label">纬度：</text>
          <text class="value">{{ inspectorInfo?.latitude }}</text>
        </view>
        <view class="info-item">
          <text class="label">更新时间：</text>
          <text class="value">{{ currentTime }}</text>
        </view>
      </view>
      
      <view class="modal-footer">
        <up-button type="primary" @click="handleRefresh">刷新位置</up-button>
        <up-button type="default" @click="handleClose">关闭</up-button>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

interface InspectorInfo {
  id: number;
  name: string;
  employeeId: string;
  phone: string;
  parkingLot: string;
  isSigned: boolean;
  signTime: string | null;
  latitude: number;
  longitude: number;
}

interface Props {
  show: boolean;
  inspectorInfo: InspectorInfo | null;
}

interface Emits {
  (e: 'update:show', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const show = defineModel('show', {
  type: Boolean,
  default: false
});

const currentTime = ref('');

// 地图中心点
const mapCenter = computed(() => {
  if (props.inspectorInfo) {
    return {
      latitude: props.inspectorInfo.latitude,
      longitude: props.inspectorInfo.longitude
    };
  }
  return {
    latitude: 39.9042,
    longitude: 116.4074
  };
});

// 地图标记点
const markers = computed(() => {
  if (props.inspectorInfo) {
    return [{
      id: 1,
      latitude: props.inspectorInfo.latitude,
      longitude: props.inspectorInfo.longitude,
      title: props.inspectorInfo.name,
      iconPath: '/static/images/inspector-marker.svg',
      width: 30,
      height: 30,
      callout: {
        content: `${props.inspectorInfo.name}(${props.inspectorInfo.employeeId})`,
        color: '#333',
        fontSize: 12,
        borderRadius: 4,
        bgColor: '#fff',
        padding: 8,
        display: 'ALWAYS'
      }
    }];
  }
  return [];
});

// 更新当前时间
const updateCurrentTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 监听弹窗显示状态
watch(() => props.show, (newVal) => {
  if (newVal) {
    updateCurrentTime();
  }
});

// 刷新位置
const handleRefresh = () => {
  updateCurrentTime();
  uni.showToast({
    title: '位置已刷新',
    icon: 'success'
  });
};

// 关闭弹窗
const handleClose = () => {
  show.value = false;
};
</script>

<style scoped lang="scss">
.location-modal {
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  
  .modal-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .inspector-info {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 26rpx;
        color: #666;
        flex-shrink: 0;
      }
      
      .value {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .map-container {
    height: 400rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    border: 1px solid #e8e8e8;
    
    .map {
      width: 100%;
      height: 100%;
    }
  }
  
  .location-info {
    background: #f0f7ff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 26rpx;
        color: #666;
        flex-shrink: 0;
      }
      
      .value {
        font-size: 26rpx;
        color: #1890ff;
        font-weight: 500;
        font-family: 'Courier New', monospace;
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 20rpx;
    
    .u-button {
      flex: 1;
      border-radius: 12rpx;
    }
  }
}
</style>